<template>
	<view>
		<view class="u-flex u-row-between sub">
			<view v-for="(item,index) in list" :key="index" :style="{width:width+'%',borderColor:activeColor,backgroundColor:index==cur?activeColor:unColor,color:index==cur?'#FFFFFF':activeColor}" :class="{first:index==0,wm_weight_flod:index==cur}" 
				style="text-align: center;" class="item" @click="change(index)">
				{{item}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		model:{
			event:"change",
			prop:'current'
		},
		props: {
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			activeColor: {
				type: String,
				default: '#135aff'
			},
			unColor: {
				type: String,
				default: '#ffffff'
			},
			current:{
				type:Number,
				default:0
			}	
		},
		data() {
			return {
			  cur:0
			}
		},
		mounted() {
			this.cur=this.current
		},
		methods:{
			change(index){
				this.$emit("change",index)
				this.$emit("tab",index)
				this.cur=index
			}
		},
		computed: {
			width: {
				get() {
					return 100 / this.list.length;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		line-height: 80rpx;
		height: 80rpx;
		border-top: 1rpx solid;
		border-bottom: 1rpx solid;
		border-right: 1rpx solid;
	}

	.first {
		border-left: 1rpx solid;
	}

	.sub {}
	
</style>
